<template>
  <div class="tabbar">
    <span :class="{active:suoyin == index }" v-for="(item,index) in tasklist" :key="index"  @click="handleclick(index)">{{item}}</span>  
  </div>
</template>

<script>
export default {
    data() {
    return{
        tasklist:['首页','订单','我的'],
        suoyin:0
    }
  },
  methods: {
    handleclick(index){
        this.suoyin = index
    }
  }
}
</script>

<style acoped>
    .tabbar{
        width: 100%;
        height: 60px;
        color: gray;
        display: flex;
        position: absolute;
        bottom: 0;
        border-top: 1px solid gray;
        justify-content: space-around;
    }
    .tabbar span{
        margin-top: 30px;
    }
    .tabbar .active{
        color: blue;
    }
</style>